<style lang="scss" scoped>
  @import '../../styles/common/loading.less';
  .container{
    border: none !important;
    margin-top: 4px;
  }
  .el-col-offset-1 {
    margin-left: 0%;
  }
  .button_a {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);

  }
  .col_a {
    margin-left: 2%;
  }
  .el-card {
    height: 200px;
  }

  .el-button--primary {
    background-color: rgba(255, 138, 0, 1);
    border-color: rgba(255, 138, 0, 1);
  }
</style>
<template>
    <div    class="common-background-color"
            v-loading="loading"
            element-loading-text="loading......"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
        <div style="width:98%;height:100%;margin: 6px 12px;">
            <el-collapse v-model="activeNames">
                <el-collapse-item title="任务申请"  name="1">
                    <!-- 基本信息 -->
                    <template>
                        <el-form :model="formInline" ref="formInline" class="info-submit-form">
                            <el-row type="flex">
                                <el-col :span="8" >
                                    <el-form-item label="大病赔案号" >
                                        <el-input v-model="formInline.caseNo"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="保单号" >
                                        <el-input v-model="formInline.policyNo"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8"  >
                                    <el-form-item label="社/医保号" >
                                        <el-input v-model="formInline.socialSecurityNo"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row type="flex">
                                <el-col :span="8" >
                                    <el-form-item label="被保险人" >
                                        <el-input v-model="formInline.insuredName"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8" >
                                    <el-form-item label="证件号" >
                                        <el-input v-model="formInline.documentNo"  disabled></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="8">
                                    <el-form-item label="注销原因"  :required="true">
                                        <el-select v-model="formInline.cancelReason"  placeholder="请选择状态">
                                            <el-option
                                                v-for="item in cancelReasonList"
                                                :key="item.codeCode"
                                                :label="item.codeCName"
                                                :value="item.codeCode">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row type="flex">
                                <el-col :span="24">
                                    <el-form-item label="注销详情" >
                                        <el-input show-word-limit v-model="formInline.cancelDescribe" type="textarea" placeholder="" ></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </template>
                </el-collapse-item>
            </el-collapse>
        </div>
        <div style="margin-top: 25px;text-align: center;height: 70px">
            <el-button type="primary" size="medium" style="width: 9%" @click="save()">提  交</el-button>
            <el-button type="primary" size="medium" style="width: 9%" @click="closePage">关闭</el-button>
        </div>
        <el-dialog
          :visible.sync="Successdialog"
          :show-close="false"
          :close-on-click-modal="true"
          :close-on-press-escape="false"
          width="20%"
          center>
          <div style="margin-top: -35px;">
            <div>| 调查审核提交</div>
            <hr style="width: 80%;margin-left: 1px">
          </div>
          <div v-if="this.item===0" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/pass.png" width="60">
            <div style="margin-top: 10px">提交成功</div>
            <div style="margin-top: 10px">大病赔案号：{{formInline.caseNo}}</div>
          </div>
          <div v-if="this.item===1" style="text-align: center;margin-top: 20px">
            <img src="../../assets/images/notPass.png" width="60">
            <div style="margin-top: 10px">提交失败</div>
            <div style="margin-top: 10px">大病赔案号：{{formInline.caseNo}}</div>
          </div>
          <div style="margin-top: 15px;text-align: center"><span style="font-size: x-large">{{time}}</span>秒后跳转到上一个页面</div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="closePage" type="text">关闭</el-button>
          </div>
        </el-dialog>
    </div>
</template>

<script>
import { queryCodeList, saveCaseCancel } from '@/api/baseDate'
import Cookies from "js-cookie";
export default {
    name: 'caseCancelDetail',
    data() {
        return {
            loading: false,
            Successdialog:false,
            cancelReasonList:[],
            activeNames: ['1'],
            formInline: {
                cancelReason: ''
            },
            time:0,
            item:0,
            item1:0,
        }
    },
    created() {
      this.querycancelReasonList();
      this.formInline=JSON.parse(this.$route.query.taskApplicant)
      this.item1=JSON.parse(this.$route.query.item)
    },
    methods: {
        save(){
          if(this.formInline.cancelReason==null || this.formInline.cancelReason==='' || this.formInline.cancelReason===undefined){
              this.$message.warning(`请选择注销原因！`);
              return;
          }else {
            var data = {
                ...this.formInline,
                handleComrCode: Cookies.get("makeCom"),
                handleComrName: Cookies.get("cMakeCom"),
                handlerName: Cookies.get("userName"),
                handlerCode: Cookies.get("userCode"),
            };
            // 禁止重复点击
            if(this.loading){
                return;
            }
            this.loading = true;
            saveCaseCancel(data).then(res => {
                this.loading = false;
                if(res.data.resultCode != '0000'){ 
                    // 返回失败
                    // this.$message.error(res.data.resultMsg);
                    this.$alert(res.data.resultMsg,'提示', {
                        confirmButtonText: '确定'
                    });
                    return;
                }
                this.Successdialog=true
                // 把time改为5
                this.time = 5;
                // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                setInterval(this.countDown, 1000);
            }).catch((function () {
                /*let THIS = this;*/
                this.item=1,
                  this.Successdialog=true
                // 把time改为5
                this.time = 5;
                // 设定一个定时器，每一秒调用一次coundDown方法，time-1
                setInterval(this.countDown, 1000);
            }))
          }
        },
        // 调查原因
        querycancelReasonList(){
            var data = {
                "codeType": "CancelReason"
            }
            queryCodeList(data)
                .then(res => {
                    this.cancelReasonList=res.data
                })
        },
        // 关闭当前页面
        closePage(){
            this.closePageTo(this.$store,this.$route,this.$router,'caseCancel');
        },
        // 封装一个方法
        countDown() {
            let THIS = this;
            THIS.time--;
        }
    },
    watch: {
        //   监听time的值
        time: function (newVal) {
          if (newVal == 0) {
              this.closePageTo(this.$store,this.$route,this.$router,'caseCancel');
          }
        }
    }
}
</script>